<style>
    .popup-menu {
        border-radius: 5px;
        display: none;
        font-size: 15px;
        color: black;
        font-family: serif;
    }
    .menu-item {
        background-color: #F8F8F8;
        color: black;
        padding: 10px 25px 10px 25px;
        list-style-type: none;
        white-space: nowrap;
        border-bottom: solid gray 1px;
    }
    .menu-item:hover, .menu-item:focus {
        background-color: #D9D9D9
    }
    .bottom-row {
        padding: 0px;
    }
    .bn-bottom {
        font-size: 15px;
        font-family: serif;
        background-color: #F9F9F9;
        border-right: ridge 1px gray;
        border-top: ridge 1px gray;
        padding: 10px 0px 10px 0px;
    }
</style>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <nav class="navbar navbar-default navbar-fixed-bottom clearfix">
            <div class="container" id="bottom-bar" style="background-color: #D9D9D9">
                <div class="row" id="menu-row">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container1"
                         style="position:relative;">
                        <div class="bn-bottom" align="center" id="bn1" onclick="onMainMenuItemClick('bn1')">
                            {$bottomMenu.0.button}
                        </div>
                        <div class="popup-menu" id="menu-content1" style="position:absolute;">
                            <ul class="list-group idx-list-group" id="container1">
                                <foreach name="bottomMenu.0.sub_buttons" item="sub_button">
                                    <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                        onclick="jumpTo('{$sub_button.url}')">
                                        {$sub_button.sub_button}
                                    </li>
                                </foreach>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container2"
                         style="position:relative">
                        <div class="bn-bottom" align="center" id="bn2" onclick="onMainMenuItemClick('bn2')">
                            {$bottomMenu.1.button}
                        </div>
                        <div class="popup-menu" id="menu-content2" style="position:absolute;">
                            <ul class="list-group idx-list-group" id="container2">
                                <foreach name="bottomMenu.1.sub_buttons" item="sub_button">
                                    <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                        onclick="jumpTo('{$sub_button.url}')">
                                        {$sub_button.sub_button}
                                    </li>
                                </foreach>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 bottom-row" align="center" id="menu-container3"
                         style="position:relative">
                        <div class="bn-bottom" align="center" id="bn3" onclick="onMainMenuItemClick('bn3')"
                             style="border-right: none">
                            {$bottomMenu.2.button}
                        </div>
                        <div class="popup-menu" id="menu-content3" style="position:absolute;">
                            <ul class="list-group" id="container3">
                                <foreach name="bottomMenu.2.sub_buttons" item="sub_button">
                                    <li class="list-group-item menu-item" align="left" id="{$sub_button.id}"
                                        onclick="jumpTo('{$sub_button.url}')">
                                        {$sub_button.sub_button}
                                    </li>
                                </foreach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>

<script src="__PUBLIC__/Js/menu.js"></script>